<template>
  <section>
    <div v-if="checkPositionMoudle">
      <!-- platType平台配置: 1.公众号，2.小程序
           guideType引导方式，公众号引导方式: 1.引导弹窗，2.创匠客服，3.微信客服  小程序引导方式: 1.小程序在线客服，2.微信客服
       -->
      <!-- 订单详情样式 -->
      <div class="c-hh72 c-flex-row c-flex-center c-fs22 c-bg-white c-bd-t1-f6" @click="custServiceFun()" v-if="position == 2">
        <i class="iconfont c-fs22">&#xe864;</i>
        <span class="c-pl16">联系客服</span>
      </div>
      <!-- 商品详情样式 / 首页 个人中心 -->
      <div class="iconBg c-brp50 c-pf c-p-c-216 c-ww70 c-hh70 c-flex-row c-justify-center c-aligni-center c-pz100 theme-box-shadow" :class="position == 1 ? 'c-p-b300' : 'c-p-b240'" @click="custServiceFun()" v-else-if="position == 1 || position == 16 || ([4, 8].includes(position))">
        <div class="c-ww70 c-hh70 c-flex-row c-justify-center c-aligni-center c-p">
          <div class="iconfont c-fs34 theme-fc">&#xe82f;</div>
        </div>
      </div>
      <!-- 引导弹窗 -->
      <connect-serves :customerConf="customerConf" :showModal="isShowCS" @closeModal="isShowCS = false"></connect-serves>
    </div>
  </section>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import { appRouterChange } from "@/mixin/appRouterPush.js";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import ConnectServes from "@/components/templates/common/connectServes.vue";
export default {
  name: "CustomServiceTmp",
  mixins: [appRouterChange],
  components: {
    ConnectServes,
  },
  props: {
    position: { // 客服入口
      type: Number,
      default: 0
    },
    module: { // 设置显示的商品模块
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || 'mb5_default',
      companyAuth: localStorage.getItem("companyAuth") ? JSON.parse(localStorage.getItem("companyAuth")) : null,
      customerConf: localStorage.getItem("customerConf") ? JSON.parse(localStorage.getItem("customerConf")) : null, // h5客服信息配置
      customerConfMp: localStorage.getItem("customerConfMp") ? JSON.parse(localStorage.getItem("customerConfMp")) : null, // 小程序客服信息配置
      isShowCS: false,
      bindPhoneSetting: null,
      isCustServiceOpen: localStorage.getItem("isCustServiceOpen") == 1 ? true : false, // 是否开启小程序客服
    };
  },
  mounted() {
    setTimeout(() => {
      this.theme = localStorage.getItem("colorName");
      this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
    }, 5000);
    getBindPhoneSetting().then(res => { // 游客模式绑定手机号
      this.bindPhoneSetting = res;
    });
  },
  computed: {
    // positions客服入口，1.商品详情页, 2.订单详情页, 4.店铺主页, 8.个人中心页，多选使用 | 或 +，如 1 | 2 | 4 | 8
    // modules设置显示的商品模块，勾选商品详情页时使用，1.课程, 2.专栏, 4.训练营, 8.知识套餐, 16.公开课, 32.实体商品, 64.打卡, 128.活动，多选使用 | 或 +，如 1 | 2 | 4 | 8
    checkPositionMoudle() {
      let enable = (!this.$isWxApp() && (!this.customerConf || (this.customerConf && this.customerConf.enableCustomer == 0))) || (this.$isWxApp() && (!this.customerConfMp || (this.customerConfMp && this.customerConfMp.enableCustomer == 0)))
      if (enable) return false
      let currentConf = this.$isWxApp() ? this.customerConfMp : this.customerConf;
      if (this.position == 1) { // 详情页涉及模块
        return this.check(currentConf.modules, this.module);
      } else {
        if (this.position == 2 || this.position == 16) {
          return true
        }
        return this.check(currentConf.positions, this.position);
      }
    }
  },
  methods: {
    check($value, $option) {
      return ($value & $option) > 0;
    },
    custServiceFun() {
      let service = this.$isWxApp() ? this.customerConfMp.guideType : this.customerConf.guideType;
      // 小程序 1.小程序在线客服，2.微信客服
      if (this.$isWxApp()) {
        if (service == 1) { // 在线客服特殊处理
          utilJs.miniProgramGoTo("push", "/pages/member/contact/index");
        } else if (service == 2) {
          utilJs.miniProgramGoTo("push", `/pages/member/contact/index?customerLink=${encodeURIComponent(this.customerConfMp.customerLink)}&corpId=${this.customerConfMp.corpId}`);
        }
      } else {
        // h5弹窗 1.引导弹窗，2.创匠客服，3.微信客服, 4.AI客服
        if (service == 1) {
          this.isShowCS = true;
          return;
        }
        if (this.bindPhoneSetting && this.bindPhoneSetting.isVisitorBind) {
          this.$routerGo(this, "push", {path: "/homePage/login/bindMobile"});
          return;
        }
        if (service == 2) {
          let host = window.location.host.indexOf("kptest.ckjr001.com") > -1 ? 'lingting-cs.myckjr.com' : window.location.host.indexOf("formal.ckjr001.com") > -1 ? 'lingting-formal.myckjr.com' : 'lingting.ckjr001.com';
          let url = "http://" + host + "/?#/?token=" + localStorage.getItem("token") + '&srcSys=kp'
          let newApp = utilJs.getAppVersion() > 0;
          //新App外链的话走原生跳转
          if (newApp) {
            this.iosAppRouteChange(url);
            return;
          }
          window.location.href = url;
        } else if (service == 3) {
          window.location.href = this.customerConf.customerLink;
        } else if (service == 4) {
          this.$routerGo(this, "push", { path: `/homePage/aiAssistant/aiAssistantChat?subScene=1` });
        }
      }
    },
  },
  activated() {
  },
  created() {
  }
};
</script>
<style scoped>
/* .customerService {
  left: -2.6rem;
} */
/* .customerService:hover {
  left: 0;
} */
.unMessage {
  right: 0.3rem;
  top: 0.36rem;
}
.icon-size1 {
  left: -2.6rem;
}
.icon-size1:hover {
  left: 0;
}
.icon-size2 {
  transform: scale(1.33);
  left: -2.77rem;
}
.icon-size2:hover {
  left: 0.6rem;
}
.icon-size3 {
  transform: scale(1.67);
  left: -3rem;
}
.icon-size3:hover {
  left: 1.3rem;
}
.iconBg{
  background:rgba(255,255,255,0.92);
}
</style>


